<script setup lang="ts">
import myAuth from "@/composables/myAuth.ts";
import myComment from "@/composables/myComment.ts";
const {comments, getComments,addComment} = myComment();
const {isLogin} = myAuth();
const {t_id} = defineProps<{
  t_id: string | number,

}>();
const form = reactive({
  content:'',
  t_id
})


await getComments(t_id);

</script>

<template>
  <main class="comment">
    <div class="top">
      <el-card shadow="hover">
        <template #header>
          评论列表
        </template>
        <div class="commentList" v-if="comments">
          <my-comment-item
              v-for="(comment,index) in comments"
              :key="index"
              :comment="comment"
              :type="'main'"
              :comments="comments"

          >
          <my-comment-item v-for="reply in comment?.reply_comments"
                           :comment="reply"
                           :key="reply.id"
                           :type="'item'"
                           class="ml-5 bg-green-100"
                           :comments="comments"

          />
          </my-comment-item>
        </div>
        <div class="noComment" v-else>
          <icon-info fill="#f5a623" size="16"/>&nbsp;暂无评论
        </div>
      </el-card>
    </div>
    <div class="bottom">
      <el-card shadow="hover">
        <template #header>
          添加评论
        </template>
        <template v-if="isLogin()">
          <markdown-editor v-model="form.content"/>
          <div class="flex justify-center items-center mt-3">
            <el-button type="primary" @click="addComment(form)"><icon-editor />&nbsp;发布</el-button>
          </div>
        </template>
        <template v-else>
          <div class="flex justify-center items-center">
            <el-button type="primary" @click="$router.push({name:'login'})">
              <icon-me/>&nbsp;登录
            </el-button>
          </div>
        </template>
      </el-card>
    </div>
  </main>
</template>

<style lang="scss" scoped>
main.comment {
  @apply w-full my-3;
  div.top {
    div.commentList {



    }

    div.noComment {

    }
  }

  div.bottom {
    @apply mt-3;
  }
}
</style>